layui.define(['jquery', 'element'], function (exports) {
    /**
     * 初始化滑动
     * 
     * @param {string} filter 为 class="layui-progress" 所在元素的 lay-filter="" 的值。你可以借助该参数，对进度条增加滑动效果。
     * @param {func} callback 滑动完成回调，回传当前百分比
     */
    function render(filter, callback) {
        var layuiProgressSelectors = '.layui-progress[lay-filter="' + filter + '"]';
        var isCanScroll = false;
        var $ = layui.jquery;
        var element = layui.element;
        //鼠标手
        $(layuiProgressSelectors).css('cursor', 'pointer');
        //鼠标按下
        $(layuiProgressSelectors).on('mousedown', function (event) {
            //左键
            if (event.button === 0) {
                isCanScroll = true;
                var offsetX = event.offsetX;
                var value = Math.round(offsetX / $(this).width() * 100).toFixed(0);
                element.progress(filter, value + '%');
                callback && callback.call(null, value);
            }
        });
        //鼠标移动
        $(layuiProgressSelectors).on("mousemove", function (event) {
            if (isCanScroll) {
                var offsetX = event.offsetX;
                var value = Math.round(offsetX / $(this).width() * 100).toFixed(0);
                element.progress(filter, value + '%');
                callback && callback.call(null, value);
            }
        });
        //鼠标松开
        $(document).on('mouseup', function (event) {
            isCanScroll = false;
        });
    }

    exports('progressSlider', {
        render: render
    });
});